<template>
  <view class="wrap">
    <view class="bg-box">
      <image
        class="bg-box-image"
        src="https://ainengli.meilianshuke.com/jkhx/weight/health-portrait-bg.png"
        mode="scaleToFill"
      />
    </view>
    <view class="content">
      <view class="tabActiveTwo tabActiveThree">
        <view class="binding">
          <text>绑定设备，同步健康数据</text>
          <view class="bind-btn" @tap="toBind">去绑定</view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">体征信息</text>
            </view>
          </view>
          <view :class="['informationWrap', 'cf', state.isExpand ? '' : 'restrict']">
            <view
              v-for="(item, index) in state.healthListNew"
              :key="index"
              @tap="healthInfo(item.healthInfo)"
              class="item"
            >
              <view class="top">
                <text
                  type=""
                  :class="['iconfont img', item.classStyle ? item.classStyle : '']"
                  :style="{ color: item.colorStyle }"
                />
                <text class="name">{{ item.name }}</text>
                <text class="meals" v-if="item.healthInfo == 'blood_sugar'">
                  {{ item.stateEat ? item.stateEat : '' }}
                </text>
                <text class="date">{{ item.collectTime ? item.collectTime : '' }}</text>
              </view>
              <view class="min" v-if="item.healthInfo == 'blood_pressure'">
                <view style="display: flex; align-items: center">
                  <text
                    class="name"
                    v-if="
                      state.healthList.sbp &&
                      !state.healthList.sbp.itemValue &&
                      state.healthList.dbp &&
                      !state.healthList.dbp.itemValue
                    "
                  >
                    -
                  </text>
                  <text class="name" v-if="state.healthList.sbp && state.healthList.sbp.itemValue">
                    {{
                      state.healthList.sbp && state.healthList.sbp.itemValue
                        ? parseInt(state.healthList.sbp.itemValue)
                        : '-'
                    }}
                  </text>
                  <img
                    v-if="
                      state.healthList.sbp &&
                      state.healthList.sbp.normalFlag &&
                      (state.healthList.sbp.normalFlag == 'H' ||
                        state.healthList.sbp.normalFlag == 'H+')
                    "
                    class="trend default"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList.sbp &&
                      state.healthList.sbp.normalFlag &&
                      state.healthList.sbp.normalFlag == 'L'
                    "
                    class="trend default on"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <text v-if="state.healthList.dbp && state.healthList.dbp.itemValue" class="slash"
                    >/</text
                  >
                  <text class="name" v-if="state.healthList.dbp && state.healthList.dbp.itemValue">
                    {{ parseInt(state.healthList.dbp.itemValue) }}
                  </text>
                  <img
                    v-if="
                      state.healthList.dbp &&
                      state.healthList.dbp.normalFlag &&
                      (state.healthList.dbp.normalFlag == 'H' ||
                        state.healthList.dbp.normalFlag == 'H+')
                    "
                    class="trend default"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList.dbp &&
                      state.healthList.dbp.normalFlag &&
                      state.healthList.dbp.normalFlag == 'L'
                    "
                    class="trend default on"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">{{ item.unit }}</text>
              </view>
              <view v-else class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{ item.itemValue ? item.itemValue : '-' }}</text>
                  <img
                    v-if="item.normalFlag && (item.normalFlag == 'H' || item.normalFlag == 'H+')"
                    class="trend"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="item.normalFlag && item.normalFlag == 'L'"
                    class="trend on"
                    src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">{{ item.unit }}</text>
              </view>
            </view>
            <view class="item moreData" @tap="healthInfoDetail()">
              <view class="wrapd">
                <image class="name" src="https://ainengli.meilianshuke.com/jkhx/common/more-data.png" />
                <text class="more">更多数据</text>
              </view>
            </view>
          </view>
          <!-- <view class="expand" @tap="state.isExpand = !state.isExpand">
            <view class="expand-text">
              {{ state.isExpand ? '收起' : '展开' }}
              <image
                v-if="!state.isExpand"
                class="img-expand"
                src="https://ainengli.meilianshuke.com/jkhx/raozg/expand.png"
              />
              <image
                v-else
                class="img-expand"
                src="https://ainengli.meilianshuke.com/jkhx/raozg/retract.png"
              />
            </view>
          </view> -->
        </view>
        <sportCard :sports="sports"></sportCard>
        <foodCard :food="food" :empi="state.userInfo.empi" @openPopup="openPopup"></foodCard>
        <drugCard :medicationInformationList="state.medicationInformationList"></drugCard>
        <up-popup
          :show="questionShow"
          :round="16"
          mode="bottom"
          @touchmove.native.stop.prevent
          closeable
          @close="questionShow = false"
        >
          <view class="pop-title">补充信息获取推荐摄入量</view>
          <view class="pop-body">
            <view class="patInfo">{{
              state.userInfo.patName + ' ' + state.userInfo.gender + ' ' + state.userInfo.age + '岁'
            }}</view>
            <view class="questionWrap">
              <scroll-view
                class="scroll-Y"
                scroll-y
                :scroll-into-view="scrollId"
                scroll-animation-duration="300"
                v-if="dietQuestionList.length > 0"
              >
                <indexQuestion
                  :cWidth="cWidth"
                  :List="dietQuestionList[0]?.list"
                  class="my-question"
                  @change="onChange"
                />
              </scroll-view>
            </view>
            <view class="fixed">
              <button @tap="submit" class="confirm-btn popbtn">提交</button>
            </view>
          </view>
        </up-popup>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { drugInfoGet, healthInfoAll } from '@/api/hmm'
import { getSportRecord } from './healthPortrait.api'
import { query_get_food } from '@/api/food'
import { weight_info_question, weight_save } from '@/module/api/questionaire'
import { parseTime, throttle } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import indexCard from './components/indexCard'
import drugCard from './components/drugCard'
import foodCard from './components/foodCard'
import sportCard from './components/sportCard'
import store from '@/store'
import indexQuestion from '@/module/components/MyQuestion/index.vue'
import { showCondition, next, validate, convert } from '@/module/components/MyQuestion/tools'
const cWidth = ref(uni.upx2px(750 - 64))
const state = reactive({
  today: parseTime(new Date(), '{yyyy}-{mm}-{dd}'),
  tabActive: 2,
  show: false,
  isExpand: false,
  estimateList: [],
  diseaseBrief: '',
  healthPrescription: [],
  medicationInformationList: [],
  healthList: {},
  userInfo: {},
  loginInfo: {},
  healthListNew: [{
    classStyle: 'icon-tizhong1',
    color: "red",
    colorStyle: "#ffd666",
    healthInfo: "BMI",
    itemName:"bmi",
    name: "体重",
    type: "bmi",
    unit: "kg"
  }, {
    classStyle: "icon-yaotunbi1",
    color: "red",
    colorStyle: "#857bff",
    healthInfo: "whr",
    itemValue: "",
    name: "腰臀比",
    type: "whr",
    unit: ""
  }, {
    classStyle: "icon-xieya1",
    color: null,
    colorStyle: "#ffa654",
    healthInfo: "blood_pressure",
    name: "血压",
    itemValue: "",
    type: "sbp",
    unit: "mmHg"
  }]
})
const scrollId = ref('')
const sports = reactive({
  totalConsume: 0,
  list: []
})
const food = reactive({
  totalEnergy: 0,
  list: []
})
const dietQuestionInfo = reactive({
  height: 0,
  weight: 0,
  ifNeedWeightLose: '',
  laborIntensity: ''
})
const dietQuestionList = ref([])
const dietQuestionListOld = ref([])

const questionInfo = ref({})
const questionShow = ref(false)
const questionBmi = computed(() => {
  if (dietQuestionInfo.weight && dietQuestionInfo.height) {
    return (
      dietQuestionInfo.weight /
        ((dietQuestionInfo.height / 100) * (dietQuestionInfo.height / 100)) || 0
    )
  } else {
    return 25
  }
})
onShow(() => {
  state.loginInfo = JSON.parse(uni.getStorageSync('userInfo'))
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  // 健康数据获取
  getHealthData()
  drugInfoGetFun()
  healthInfoAllFun()
})

const submit = () => {
  const f = List_validate()
  if (f) {
    const params = {
      clientId: 23,
      patientQuestionnaireAnswerVOs: []
    }
    dietQuestionList.value.forEach((item: any) => {
      item.list.forEach((val: any) => {
        const answerModel = {
          id: questionInfo.value.id,
          userId: state.loginInfo.userId,
          empi: state.userInfo.empi,
          creator: '',
          createTime: questionInfo.value.createTime,
          updateTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
          questionnaireId: questionInfo.value.questionnaireId,
          questionId: val.id,
          questionnaireRecordId: questionInfo.value.questionnaireId,
          relationQuestionId: val.relationQuestionId,
          relationQuestionCode: val.relationQuestionCode,
          optionId: '',
          content: '',
          extContent: val.questionType == '选择 + 输入' ? val.inputText : '',
          score: val.scores
        }
        if ((val.type == '单选' && val.value) || (val.type == '输入' && val.value)) {
          const answer = {
            ...answerModel,
            optionId: val.type == '单选' && val.optionId ? String(val.optionId) : '',
            content: val.value
          }
          params.patientQuestionnaireAnswerVOs.push(answer)
        } else if (val.type == '多选') {
          if (val.value && val.value.length > 0) {
            val.value.forEach((i: string, idx: number) => {
              const num = val.options.findIndex((w) => w.value === i)
              const answer = {
                ...answerModel,
                optionId: val.options[num].id,
                content: i,
                score: val.options[num].score
              }
              params.patientQuestionnaireAnswerVOs.push(answer)
            })
          }
        } else if (val.type === '搜索输入' && val.value) {
          const answer = {
            ...answerModel,
            optionId: '',
            content: val.value,
            extContent: JSON.stringify(val.extContent)
          }
          params.patientQuestionnaireAnswerVOs.push(answer)
        } else {
          if (val.value) {
            const answer = {
              ...answerModel,
              optionId: '',
              content: val.value
            }
            params.patientQuestionnaireAnswerVOs.push(answer)
          }
        }
      })
    })
    uni.showLoading({
      title: '正在提交问卷',
      mask: true
    })
    weight_save(params).then((res) => {
      uni.hideLoading()
      uni.showToast({
        title: '保存成功'
      })

      setTimeout(() => {
        questionShow.value = false
        uni.navigateTo({
          url: '/module/src/pages/food/dailyFood/index'
        })
      }, 300)
    })
  }
}
const List_validate = () => {
  const List = dietQuestionList.value[0].list
  const arr = []
  List.map((u) => {
    const v = validate(u)
    arr.push(v)
  })
  arr.map((v) => {
    v.item['validate'] = v.code
    if (v.code) {
      v.item['validate_message'] = v.message
    } else {
      v.item['validate_message'] = ''
    }
  })
  const f = arr.find((v) => {
    return v.code
  })
  if (f) {
    scrollId.value = ''
    nextTick(() => {
      scrollId.value = '.my-question >>> #' + f.item.id
    })
    return false
  } else {
    return true
  }
}
const onChange = () => {
  dietQuestionList.value = showCondition(dietQuestionListOld.value)
}
const drugInfoGetFun = () => {
  state.medicationInformationList = []
  const drugEmpi = state.userInfo.empi
  drugInfoGet(drugEmpi).then((res) => {
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        state.medicationInformationList = res.data
      } else {
        state.medicationInformationList = []
      }
    }
  })
}
const healthInfoAllFun = () => {
  const param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthList = res.data
      dietQuestionInfo.height = res.data.height.itemValue
      dietQuestionInfo.weight = res.data.weight.itemValue
      let resultData = Object.entries(state.healthList).map(([name, info]) => ({
        ...info,
        type: name
      }))
      let resultDataFilter = []
      for (let i = 0; i < resultData.length; i++) {
        let obj = resultData[i]
        if (resultData[i].type == 'bmi') {
          obj.collectTime =
            state.healthList.weight && state.healthList.weight.collectTime
              ? timeFilter(state.healthList.weight.collectTime)
              : ''
          obj.itemValue =
            state.healthList.weight && state.healthList.weight.itemValue
              ? state.healthList.weight.itemValue
              : ''
          obj.name = '体重'
          obj.healthInfo = 'BMI'
          obj.classStyle = 'icon-tizhong1'
          obj.colorStyle = '#ffd666'
          obj.unit = 'kg'
          obj.sort = 1
          // resultDataFilter.unshift(obj)
          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'whr') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '腰臀比'
          obj.healthInfo = 'whr'
          obj.classStyle = 'icon-yaotunbi1'
          obj.colorStyle = '#857bff'
          obj.unit = ''
          obj.sort = 2
          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'sbp') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '血压'
          obj.healthInfo = 'blood_pressure'
          obj.classStyle = 'icon-xieya1'
          obj.colorStyle = '#ffa654'
          obj.unit = 'mmHg'
          obj.sort = 3
          resultDataFilter.push(obj)
        }
      }
      resultDataFilter.sort((a, b) => a.sort - b.sort)
      state.healthListNew = resultDataFilter
    } else {
      state.healthList = {}
    }
  })
}
const timeFilter = (t: string) => {
  if (!t) {
    return ''
  }

  const n = new Date()
  const d = parseTime(n, '{y}-{m}-{d}')

  if (t.includes(d)) {
    return parseTime(t, '{h}:{i}')
  } else {
    return parseTime(t, '{m}-{d}')
  }
}
const healthInfoDetail = () => {
  uni.navigateTo({ url: '/module/src/pages/healthPortrait/healthMonitor' })
}
const healthInfo = (type) => {
  uni.navigateTo({
    url: '/module/src/pages/echartsInfo/index?type=' + type
  })
}
const getHealthData = () => {
  // 健康数据
  const params = {
    empi: state.userInfo.empi,
    date: state.today,
    sportTypes: '1,2'
  }
  getSportRecord(params).then((res) => {
    // 运动信息
    sports.list = res.data
    sports.totalConsume = 0
    sports.list.forEach((item) => {
      sports.totalConsume += item.consume
    })
    sports.totalConsume = parseFloat(sports.totalConsume.toFixed(2))
  })
  query_get_food(params).then((res) => {
    // 饮食信息
    food.list = []
    res.data.forEach((item) => {
      food.list = food.list.concat(item.list)
    })
    food.totalEnergy = 0
    res.data.forEach((i) => {
      food.totalEnergy += Number(computeTotal(i.list))
    })
  })
}
const computeTotal = (arr: Array) => {
  // 计算热量
  let total = 0
  arr.forEach((item) => {
    total += Math.round((item.energy * item.amount) / 100)
  })
  return total
}

const openPopup = (item) => {
  questionShow.value = item.questionShow
  questionInfo.value = item.questionInfo
  let convertList = convert(item.dietQuestionList)
  dietQuestionListOld.value = convertList
  dietQuestionList.value = showCondition(convertList)
}
// 弹窗 阻止事件冒泡
const handleTouchMove = (e) => {
  e.preventDefault()
}
const toBind = () => {
  uni.navigateTo({
    url: '/module/src/pages/myEquipment/index'
  })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: 64rpx;
  background: #fff;

  .content {
    position: relative;
    top: -96rpx;

    .tabActiveTwo {
      background: #fff;

      &.tabActiveThree {
        padding-top: 32rpx;
        border-radius: 24rpx 24rpx 0 0;

        .card {
          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }
    }

    .binding {
      margin: 0 32rpx 32rpx;
      background: #fafafa;
      border-radius: 44rpx;
      border: 1rpx solid #e5e6eb;
      display: flex;
      align-items: center;
      height: 88rpx;
      padding: 0 24rpx;
      font-weight: 700;
      font-size: 26rpx;
      color: #222222;
      justify-content: space-between;
      .bind-btn {
        background: #ffffff;
        border-radius: 28rpx;
        font-size: 24rpx;
        padding: 0 24rpx;
        height: 56rpx;
        line-height: 56rpx;
        border: 1rpx solid #e5e6eb;
      }
    }

    .expand {
      margin-top: 16rpx;
      background: #fafafa;
      border-radius: 28rpx;
      border: 1rpx solid #e5e6eb;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      .img-expand {
        width: 32rpx;
        height: 32rpx;
        transform: translateY(8rpx);
      }
    }

    .card {
      margin: 32rpx 32rpx 0;
      background: #fff;

      &:nth-of-type(1) {
        margin: 32rpx 32rpx 0;
      }

      .interpretation {
        position: relative;
        height: 46rpx;

        .left {
          .border {
            display: inline-block;
            width: 8rpx;
            height: 32rpx;
            vertical-align: middle;
            background: #00d1b6;
            border-radius: 0 4rpx 4rpx 0;
          }

          .name {
            display: inline-block;
            margin-left: 16rpx;
            font-size: 32rpx;
            font-weight: 700;
            color: #222;
            vertical-align: middle;
          }
        }

        .right {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);

          .check-text {
            display: inline-block;
            font-size: 28rpx;
            color: #00d1b6;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            font-size: 32rpx;
            color: #00d1b6;
            vertical-align: middle;
            width: 32rpx;
            height: 32rpx;
          }

          &.record {
            padding: 4rpx 14rpx 6rpx 20rpx;
            border: 1rpx solid #00d1b6;
            border-radius: 45rpx;

            .check-text {
              font-weight: 700;
              transform: translateY(-2rpx);
            }
          }
        }
      }
      .restrict {
        height: 428rpx;
        overflow: hidden;
      }

      .informationWrap {
        margin-top: 32rpx;
        .item {
          box-sizing: border-box;
          float: left;
          width: calc(50% - 14rpx);
          padding: 32rpx 24rpx;
          margin-bottom: 24rpx;
          background: #fafafa;
          border: 1rpx solid #e5e6eb;
          transform: rotate(360deg);
          border-radius: 16rpx;
          height: 200rpx;
          &.on {
            width: 100%;
          }
          &:nth-child(2n + 1) {
            margin-right: 22rpx;
          }

          .top {
            position: relative;
            font-size: 24rpx;
            color: #999;

            .img {
              display: inline-block;
              margin-right: 16rpx;
              font-size: 56rpx;
              vertical-align: middle;
              width: 56rpx;
              height: 56rpx;
            }

            .name {
              display: inline-block;
              font-size: 32rpx;
              font-weight: 700;
              color: #222;
              vertical-align: middle;
            }

            .meals {
              display: inline-block;
              margin-left: 10rpx;
              color: #666;
              vertical-align: middle;
            }

            .date {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
          }

          .min {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 24rpx;

            .name-label {
              width: 200rpx;
              font-size: 30rpx;
              font-weight: 400;
              color: #222;
            }

            .name {
              font-size: 40rpx;
              font-weight: 700;
              color: #222;
            }

            .slash {
              display: inline-block;
              margin: 0 5rpx;
              vertical-align: middle;
            }

            .trend {
              display: inline-block;
              width: 18rpx;
              height: 18rpx;
              margin-left: 8rpx;
              vertical-align: middle;

              &.on {
                transform: rotate(-180deg);
              }

              &.default {
                margin: 0;
              }
            }

            .date {
              font-size: 24rpx;
              color: #999;
            }

            .unit {
              font-size: 28rpx;
              color: #999;
            }
          }
          &.moreData {
            height: 200rpx;
            position: relative;
            border-color: #00d1b6;
            background: #fff;
            .wrapd {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              .name {
                display: block;
                font-size: 32rpx;
                width: 48rpx;
                height: 48rpx;
                margin: 0 auto;
              }
              .more {
                display: block;
                font-size: 30rpx;
                color: #00d1b6;
                font-weight: 600;
                text-align: center;
                margin-top: 16rpx;
              }
            }
          }
        }
      }
    }
  }
  // 补充信息弹窗样式
  .pop-title {
    height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 108rpx;
    color: #222;
    text-align: center;
    border-bottom: 1rpx solid #e5e6eb;
  }
  .pop-body {
    // 搜索弹窗

    .patInfo {
      background: #e8f7ff;
      border-radius: 4rpx;
      padding: 16rpx 24rpx;
      margin: 32rpx 32rpx 24rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: #3491fa;
    }
    .questionWrap {
      height: calc(100vh - 400rpx);
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      .scroll-Y {
        height: 100%;
      }
    }
    .fixed {
      padding: 24rpx 32rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      .popbtn {
        width: 100%;
        font-size: 32rpx;
        font-weight: 700;
        color: #fff;
        background: #00d1b6;
        border: 1rpx solid #00d1b6;
        border-radius: 44rpx;
      }
    }
  }

  ::v-deep .u-popup {
    .popup-wrap {
      //   padding-bottom: calc(rpx + constant(safe-area-inset-bottom));
      //   padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      padding-bottom: 24rpx;

      .title {
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid #e5e6eb;
      }

      .popupContent {
        display: inline-block;
        max-height: 756rpx;
        padding: 32rpx;
        overflow: auto;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 54rpx;
        color: #222;
        text-align: justify;
      }

      .btn {
        height: 88rpx;
        margin: 32rpx 32rpx 0;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }
    }

    .u-popup__content__close {
      top: 40rpx;

      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }
}

.bg-box {
  position: relative;
}

.bg-box-image {
  width: 100%;
  height: 328rpx;
}
</style>
